/** @jsxImportSource @emotion/react */
import * as React from "react";
import PropTypes from "prop-types";
import { Spinner } from "./Spinner";
import { useTheme } from "./Theme/Providers";



export type LayerElevations = "xs" | "sm" | "md" | "lg" | "xl";

interface LayerProps extends React.HTMLProps<HTMLDivElement> {
  /** The size of the shadow to use */
  elevation?: LayerElevations;
  /** The contents of the layer */
  children: React.ReactNode;
}

/**
 * 实际就是div有周边边角，圆弧突出的div
 */
export const Layer =(
    {
        elevation = "md",
        children,
        ...other
    }: LayerProps & React.ClassAttributes<HTMLDivElement>
  ) => {
    const theme = useTheme();
    //@ boxShadow 性能问题  transform: translate3d(0, 0, 0);
    return (
      <div
        css={{
          position: "relative",
          background: theme.colors.background.layer,
          boxShadow: theme.shadows[elevation],
            "@media print": {
                boxShadow: 'unset',       //极大地影响打印性能
            },
          borderRadius: theme.radii.lg,
          transform: 'translate3d(0, 0, 0)',        //开启 GPU 加速地
        }}
        {...other}
      >
        {children}
      </div>
    );
  };

/**
 * 旧版本，可注入ref
 */
export const LayerRefComp =
    (
        { elevation = "md", children,ref, ...other }: LayerProps
    ) => {
        const theme = useTheme();

        return (
            <div
                ref={ref}
                css={{
                    position: "relative",
                    background: theme.colors.background.layer,
                    boxShadow: theme.shadows[elevation],
                    borderRadius: theme.radii.lg
                }}
                {...other}
            >
                {children}
            </div>
        );
    };

Layer.displayName = "Layer";

// Layer.propTypes = {
//   elevation: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl"]),
//   children: PropTypes.node
// };

interface LayerLoadingProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Whether the layer is currently loading */
  loading: boolean;

  /** An optional label to display below the loading spinner */
  label?: string;
}

/**淘汰掉了！    烦劳请直接用 Spinner 来替换 LayerLoading 功能；
 * */
export const LayerLoading = ({
  loading,
  label,
  ...other
}:LayerLoadingProps) => {
  const theme = useTheme();
  const isDark = theme.colors.mode === "dark";

  return (
    <div
      css={{
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        borderRadius: theme.radii.lg,
        bottom: 0,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        background: isDark ? "rgba(0,0,0,0.75)" : "rgba(255,255,255,0.7)",
        zIndex: 5,
        transition: "opacity 0.3s ease",
        pointerEvents: loading ? "auto" : "none",
        opacity: loading ? 1 : 0,
          "@media print": {
              transition: 'unset',
          },
      }}
      {...other}
    >
      <Spinner doing={loading} label={label} />
    </div>
  );
};

LayerLoading.propTypes = {
  loading: PropTypes.bool.isRequired,
  label: PropTypes.string
};
